<!DOCTYPE html>
<html>
<head>
    <title>S-Shaped Progress Bar</title>
</head>
<body>
    <svg width="300" height="100">
        <!-- 创建一个灰色的背景矩形 -->
        <rect x="10" y="40" width="280" height="20" fill="#ccc" />

        <!-- 创建S形进度条的路径 -->
        <path d="M10,50 L90,50 C110,10 190,90 210,50 L290,50" stroke="blue" fill="none" stroke-width="20" />

        <!-- 创建一个遮罩来显示进度 -->
        <mask id="progressMask">
            <rect x="10" y="40" width="0" height="20" fill="white">
                <animate attributeName="width" from="0" to="280" dur="3s" repeatCount="indefinite" />
            </rect>
        </mask>

        <!-- 应用遮罩到进度条上 -->
        <rect x="10" y="40" width="280" height="20" fill="blue" mask="url(#progressMask)" />

        <!-- 添加百分比文本 -->
        <text x="150" y="35" text-anchor="middle" font-size="16" fill="black">50%</text>
    </svg>
</body>
</html>
